<template>
  <div>
    <el-card class="box-card">
      <!-- 分页组件 -->
      <avue-crud :table-loading="loading" :option="option" :data="data" :page.sync="page"
                 :row-style="rowStyle"
                 @size-change="sizeChange"
                 @current-change="currentChange" @row-del="rowDel"
                 :search.sync="search" @search-change="searchChange" v-model:search="search"
                 @search-reset="searchReset">
        <template slot="menu" slot-scope="scope">
          <el-button type="text" style="font-size: 12px;" v-if="scope.row.stepStatus === 'waitsellersend'"
                     @click="localBtn(scope.row.tradeName, scope.row)">
            前往拍单
          </el-button>
          <el-button type="text" style="font-size: 12px;" v-if="scope.row.stepStatus === 'waitsellersend'"
                     @click="localtionSend(scope.row)">
            查看发货状态
          </el-button>
          <el-button type="text" style="font-size: 12px;"
                     v-if="scope.row.stepStatus === 'cancel' && scope.row.cancelConfirmStatus !== 1"
                     @click="cancelConfirm(scope.row)">
            退货确认
          </el-button>
        </template>
        <template slot="search" slot-scope="{row,size}">
          <div class="el-form-item el-form-item--small avue-form__item--">
            <label class="el-form-item__label" >下单时间：</label>
            <el-date-picker
              style="margin-right: 10px; width: 400px !important; height: 32px; line-height: 32px;"
              v-model="dateRange"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd 00:00:00"
              :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </template>
        <template slot="number" slot-scope="scope">
          <div>
            <div>
              <div>
                <div>
                  <span>{{ scope.index + 1 }}</span>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template slot="slotNumber" slot-scope="scope">
          <div>
            <div class="number">
              <div>
                <div>
                  <span>{{ scope.row.id }}</span>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template slot="store-information" slot-scope="scope">
          <div>
            <div class="seller_container">
              <div class="seller_info">
                <div>
                  <el-tag>{{ scope.row.tradingPlatform }}</el-tag>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template slot="slot-Seller" slot-scope="scope">
          <div>
            <div class="seller_container">
              <div class="seller_info">
                <div class="margin-leftLength">
                  <span>{{ scope.row.userName }}</span>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template slot="slot-img" slot-scope="scope">
          <!-- 第一部分 -->
          <div>
            <div>
              <div class="imgBox">
                <div>
                  <!-- 图片位置 -->
                  <img class="img" :src="JSON.parse(scope.row.imgUrl)[0]"/>
                </div>
                <div class="imgBox_info">
                  <!-- 图片信息 -->
                  <div><span>{{ scope.row.tradeName }}</span></div>
                  <!-- 货号 -->
                  <div v-if="!scope.row.productNumber == ''"><span>货号：</span><span>{{ scope.row.productNumber }}</span>
                  </div>
                </div>
              </div>
              <!-- 详细信息的展示 -->
              <div class="detailInfo">
                <div>
                  <span class="tip">收货地址:</span>
                  <span class="margin-leftLength">{{ scope.row.sellerImPlatform }}</span>
                  <span style="margin-left: 10px;">{{ scope.row.mobile }}</span>
                  <span>
                                        <span>{{ scope.row.detailAddress }}</span>
                                    </span>
                </div>
              </div>
              <!-- 备注信息 -->
              <div class="note">
                <div>
                  <span class="tip">店铺备注:</span>
                  <el-tag type="danger" style="margin-left: 10px;">
                    <span>{{
                        JSON.parse(scope.row.productItems)[0].refundStatus == "REFUND_SUCCESS" ? "售中退款" : JSON.parse(scope.row.productItems)[0].refundStatus
                      }}</span>
                    <span>({{ scope.row.refundId }})</span>
                  </el-tag>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template slot="slot-img_two" slot-scope="scope">
          <div>
            <div class="specifications">
              <div>
                <div v-for="item in getSpecifications(scope.row.specifications)">
                  <div>
                    <span>[{{ item.name }}]</span>
                    <span>{{ item.value }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template slot="slot-img_three" slot-scope="scope">
          <div>
            <div class="status">
              <div>
                <el-tag type="danger">
                  {{ scope.row.stepStatusStr }}
                </el-tag>
              </div>
              <div>
                <el-tag type="danger">
                  {{ scope.row.refundStatus }}
                </el-tag>
              </div>
            </div>
          </div>
        </template>
        <template slot="slot-img_Four" slot-scope="scope">
          <div>
            <div class="price">
              <div class="price_info">
                <span>￥</span>
                <span>{{ scope.row.commodityUnivalent }}</span>
              </div>
              <div>
                <span>X</span>
                <span>{{ scope.row.commodityNum }}</span>
              </div>
            </div>
          </div>
        </template>
        <template slot="slot-img_Five" slot-scope="scope">
          <div>
            <div class="price">
              <div class="price_container">
                <div class="price_info">
                  <span class="price_info_text">￥</span>
                  <span class="price_info">{{ scope.row.actualPrice }}</span>
                </div>
                <div>
                  <span>(含运费: ￥{{ scope.row.shippingFee }})</span>
                </div>
              </div>
              <div>
                <span>实付:</span>
                <span v-if="scope.row.refundStatus == '退款成功'" class="redFontSize"><span> ￥</span>{{ 0 }}</span>
                <span v-else class="redFontSize"><span> ￥</span>{{ scope.row.actualPrice }}</span>
              </div>
            </div>
          </div>
        </template>
        <template slot="slot-img_six" slot-scope="scope">
          <div>
            <div>
              <div>
                <span>{{ scope.row.buyerImPlatform }}</span>
              </div>
            </div>
          </div>
        </template>
        <template slot="slot-img_seven" slot-scope="scope">
          <div>
            <div>
              <div>
                <span>{{ scope.row.createTime }}</span>
              </div>
            </div>
          </div>
        </template>
        <template slot="slot-img_eight" slot-scope="scope">
          <div>
            <div>
              <div>
                <span>{{ scope.row.payStatus }}</span>
              </div>
            </div>
          </div>
        </template>
        <!--        <template slot="menuLeft">-->
        <!--          <el-button type="primary"-->
        <!--                     size="small"-->
        <!--                     icon="el-icon-add"-->
        <!--                     style="margin-left: 20px"-->
        <!--                     plain-->
        <!--                     @click="handleSync">同步订单-->
        <!--          </el-button>-->
        <!--        </template>-->
      </avue-crud>
    </el-card>
    <el-dialog
      title="信息展示"
      :visible.sync="centerDialogVisible"
      width="30%"
      @close="dialogClose"
      center>
      <div>
        <div class="buyerContainer">
          <div v-for="item in buyerInfo" :key="item" class="buyerRowContainer">
            <div class="title">
              <span>{{ item.title }}</span>
            </div>
            <div class="value">
              <span>{{ item.value }}</span>
            </div>
          </div>
          <div class="buyerContainer-input">
            <div class="buyer-input-title">
              <span>跳转链接:</span>
            </div>
            <div>
              <el-input v-model="dialogDate" :placeholder="dialogDate"></el-input>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
            <el-button @click="dialogCancel">清空文本数据</el-button>
            <el-button type="primary" @click="dialogSure">跳转链接</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getBuyerInfo,
  getList,
  deleteSingleTicket,
  getTicketByCondition,
  getTradeSellerView,
  getPayStatusByLike, getTransactionStatus,
  getSendGoodUrl,
  update
} from '@/api/ticket/ticket'
import {shopSelect} from '@/api/product_source/product_source'
import dayjs from "dayjs"
import {sync} from "@/api/shop/shop";

export default {
  name: 'TicketSystemAdminOrderListItem',
  props: {
    tabValue: {
      type: Object,
      default: {
        index: '2'
      }
    },
    filterModel: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      dateRange: '',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一年',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      buyerInfo: [
        {title: "买家姓名", value: "xxx"},
        {title: "买家电话", value: "xxx"},
        {title: "买家地址", value: "xxx"}
      ],
      // 关键字value
      keyValue: "",
      // 店铺选择
      shop_select: "",
      // 采购选择
      procure_select: "",
      // 价格起始
      lowPrice: "",
      // 价格最后
      highPrice: "",
      search: {},
      timeValue: '',
      header: [
        "商品信息",
        "规格",
        "商品状态",
        "单价/数量",
        "操作",
        "订单金额",
        "订单整体状态",
        "买家信息"
      ],
      selectData: [],
      option: {
        addBtn: false,
        searchIndex: 3,
        searchIcon: true,
        searchMenuSpan: 10,
        refreshBtn: false,
        searchBtn: true,
        editBtn: true,
        delBtn: false,
        searchMenuPosition: "center",
        column: [
          {
            label: "序号",
            prop: "number",
            align: "center",
            minWidth: "80",
            slot: true,
          },
          {
            label: "订单编号",
            prop: "slotNumber",
            align: "center",
            minWidth: "150",
            slot: true,
          },
          {
            label: "店铺信息",
            prop: "userName",
            align: "center",
            minWidth: "150",
            search: true,
            type: 'select',
            dicUrl: "/api/celery-shop/shop/shop_select",
            props: {
              label: "label",
              value: "label"
            },
          },
          {
            label: "卖家联系人",
            prop: "slot-Seller",
            align: "center",
            minWidth: "270",
            slot: true
          },
          {
            label: "商品信息",
            prop: "slot-img",
            headerAlign: "center",
            minWidth: "440",
            slot: true
          },
          {
            label: "规格",
            prop: "slot-img_two",
            minWidth: "240",
            align: "center",
            slot: true
          },
          {
            label: "商品状态",
            prop: "slot-img_three",
            align: "center",
            slot: true
          },
          {
            label: "单价/数量",
            prop: "slot-img_Four",
            align: "center",
            minWidth: "150",
            slot: true
          },
          {
            label: "订单价格",
            prop: "slot-img_Five",
            align: "center",
            minWidth: "150",
            slot: true
          },
          {
            label: "买家信息",
            prop: "slot-img_six",
            align: "center",
            slot: true
          },
          {
            label: "创建时间",
            prop: "slot-img_seven",
            align: "center",
            minWidth: "150",
            slot: true
          },
          {
            label: "支付状态",
            prop: "slot-img_eight",
            align: "center",
            minWidth: "150",
            slot: true
          }
        ],
      },
      data: [],
      address: [],
      page: {
        currentPage: 1,
        total: 0,
        background: false,
        pageSize: 10
      },
      cusPageSize: 10,
      cusPage: 1,
      params: {},
      baseUrl: "https://pifa.pinduoduo.com/search",
      centerDialogVisible: false,
      dialogDate: {},
      localBtnRow: {},
      loading: false
    };
  },

  computed: {
    getAddress() {
      return (address) => {
        return JSON.parse(address).address.split(" ")
      }
    },
    getSpecifications() {
      return (specifications) => {
        return JSON.parse(specifications)
      }
    }
  },

  async mounted() {
    this.onLoad(this.page, this.params)
  },

  methods: {
    rowStyle({row, column, rowIndex}) {
      if (row.stepStatus === 'cancel' && row.cancelConfirmStatus === 1) {
        return {
          backgroundColor: '#f18e8e',
        }
      }
    },
    handleSync() {
      if (!this.shop_select && this.shop_select === '') {
        this.$message.warning("请先选择要同步的店铺!")
        return
      }
      sync(this.shop_select).then(() => {
        this.$message({
          type: "success",
          message: "操作成功!"
        })
        this.onLoad(this.page, this.params)
      })
    },
    dialogCancel() {
      this.dialogDate = ""
    },
    dialogClose() {
      this.localBtnRow = {}
      this.dialogDate = ""
    },
    paramConstruct(paramsItem, urlItem) {
      let params = [
        {"orderId": paramsItem.id},
        {"shopName": paramsItem.userName},
        {"buyerName": this.buyerInfo[0].value},
        {"buyerPhone": this.buyerInfo[1].value},
        {"buyerAddress": this.buyerInfo[2].value},
        {"goodsImg": JSON.parse(paramsItem.imgUrl)[0]},
        {"goodsInfo": paramsItem.tradeName},
        {"goodsSpecifications": JSON.parse(paramsItem.specifications)[0].value},
        {"actualPrice": paramsItem.commodityPrice},
        {"goodsCount": paramsItem.commodityNum},
      ]
      for (const iterator of params) {
        for (const key in iterator) {
          urlItem += '&' + key + '=' + iterator[key]
        }
      }
      return urlItem
    },
    dialogSure() {
      if (this.dialogDate == "") {
        // 跳转默认链接
        window.open(this.paramConstruct(this.localBtnRow, this.baseUrl))
        return
      }
      window.open(this.paramConstruct(this.localBtnRow, this.dialogDate))
    },
    // 跳转发货页面
    async localtionSend(row) {
      const data = await getSendGoodUrl(row.id)
      const url = data.data.data
      console.log(url)
      if (url == '') {
        this.$message.error("跳转地址出现了问题")
        return
      }
      window.location.href = url
    },
    cancelConfirm(row) {
      this.$confirm("确认取消, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        update({id: row.id, cancelConfirmStatus: 1}).then(() => {
          this.$message({
            type: "success",
            message: "操作成功!"
          })
          this.onLoad(this.page, this.params)
        })
      });
    },
    async localBtn(productName, row) {
      this.localBtnRow = row
      const {data} = await getTradeSellerView(row.id)
      // 弹框展示（买家部分信息)
      this.centerDialogVisible = true
      this.dialogDate = row
      this.buyerInfo.map(item => {
        if (item.title == "买家姓名") {
          item.value = row.buyerImPlatform
        }
        if (item.title == "买家电话") {

        }
        if (item.title == "买家地址") {
          item.value = row.detailAddress
        }
      })
      const mydate = await getBuyerInfo(row.id)
      this.buyerInfo = mydate.data.data
      // 添加默认地址
      this.dialogDate = row.baseUrl ? row.baseUrl : 'https://mobile.yangkeduo.com/search_result.html' + "?search_key=" + this.localBtnRow.tradeName
    },
    searchReset() {
      this.query = {};
      this.dateRange = ''
      this.onLoad(this.page);
    },
    async getInitShopSelectDataList() {
      const {data} = await shopSelect()
      this.selectData = data.data
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
      this.onLoad(this.page, this.params)
    },
    currentChange(page) {
      this.page.currentPage = page
    },
    async rowDel(row, index) {
      await deleteSingleTicket(row.id)
      this.$message.success("删除成功")
      // 重新请求
      this.onLoad(this.page.currentPage, this.page.pageSize)
    },
    async searchChange(row, done) {
      this.query = row;
      this.page.currentPage = 1;
      this.onLoad(this.page, row);
      done();
    },
    onLoad(page, params = {}) {
      this.loading = true;
      if (this.dateRange && this.dateRange !== '') {
        params.createTimeStart = this.dateRange[0]
        params.createTimeEnd = this.dateRange[1]
      }
      if (this.filterModel[this.tabValue.index].type === "payStatus") {
        params.payStatus = this.filterModel[this.tabValue.index].value
      } else if (this.filterModel[this.tabValue.index].type === "transactionStatus") {
        if (this.filterModel[this.tabValue.index].value === 'terminated') {
          params.isClose = true
        } else {
          params.stepStatus = this.filterModel[this.tabValue.index].value
        }
      } else if (this.filterModel[this.tabValue.index].type === "refundStatus") {
        params.stepStatus = this.filterModel[this.tabValue.index].value
      }
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.search_select_span {
  display: flex;
  justify-content: center;
}

.search_select_span_first {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 34px;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 30px;
}

/deep/ .el-card__body {
  margin-top: 25px;
}

.box-card {
  background-color: #f4f4f3;
}

.search_select_span {
  font-size: 14px;
  color: #606266;
  line-height: 34px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
  margin-left: 40px;
}

.search_select_select {
  width: auto !important;

  /deep/ .el-input__inner {
    height: 34px !important;
    line-height: 34px;
  }
}

.header {
  display: flex;
  justify-content: space-between;
  flex: 1;
}

.container {
  margin-top: 20px;
}

.container_top {
  display: flex;
  flex-direction: row;

  .container_top_info {
    margin-left: 5px;
    display: flex;
    flex-direction: column;
  }
}

.container_middle {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.imgBox {
  display: flex;

  .imgBox_info {
    margin-left: 15px;
  }

  .img {
    max-width: 45px;
    max-height: 45px;
  }
}

.tip {
  font-weight: 800;
}

.margin-leftLength {
  margin-left: 10px;
}

.specifications {
  display: flex;
  justify-content: center;
}

.status {
  display: flex;
  flex-direction: column;

  & > div:nth-child(1) {
    margin-bottom: 10px;
  }
}

.price {
  .price_info {
    font-size: 14px;
    color: red;
    font-weight: 600;
    margin-bottom: 15px;
  }
}

.price_container {
  display: flex;
  justify-content: center;
}

.seller_info {
  display: flex;
  justify-content: center;
}

.redFontSize {
  color: red;
  font-size: 14px;
  font-weight: 800;
}

.buyerContainer {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font-size: 14px;
}

.buyerRowContainer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 20px;
}

.buyerContainer-input {
  width: 100%;
  display: flex;
  padding: 20px;
  box-sizing: border-box;

  & > div:nth-child(1) {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 20%;
  }

  & > div:nth-child(2) {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
  }
}
</style>
<style>
.el-select-dropdown {

.el-select-dropdown__wrap {
  margin-bottom: 0px !important;
}

}
</style>
